<template>
  <div class="center-bottom-wrap">
    <e-bar :id="id()" :chartData="barData" @q-brushselected="handleBrushSelected" v-if="hasShow" />
    <e-line :id="id()" :chartData="zqfxData" v-if="hasShowZQFX" @q-click="handleELineClick" />
    <Spin fix v-show="centerBottomChartLoading">加载中...</Spin>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { each, merge, head, last, indexOf } from 'lodash'
import { eBarOptions, eLineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-center-bottom',
  components: {
    EBar: () => import('@/commons/charts/EBar'),
    ELine: () => import('@/commons/charts/ELine')
  },
  computed: {
    ...mapState(['bottomBarList', 'centerBottomChartLoading', 'selecteType', 'zqfxList', 'ZZQQSSelectedPoint']),
    id() {
      return nanoid
    },
    qsfxData() {
      const _serList = []
      const _xAiaxList = []
      each(this.qsfxList, item => {
        const { hour, usage } = item
        _serList.push(usage)
        _xAiaxList.push(hour)
      })
      return merge({}, eLineOptions, {
        xAxis: {
          data: _xAiaxList
        },
        series: [
          {
            data: _serList
          }
        ]
      })
    },
    zqfxData() {
      const _xAiaxList = []
      for (let i = 1; i <= this.zqfxList.length; i++) {
        _xAiaxList.push(i)
      }
      return merge({}, eLineOptions, {
        xAxis: {
          data: _xAiaxList
        },
        series: [
          {
            data: this.zqfxList
          }
        ]
      })
    },
    barData() {
      const _xAxisList = []
      const _serList = []
      each(this.bottomBarList, (item, index) => {
        const { min, max, value } = item
        _serList.push({
          name: min + '-' + max,
          value,
          min,
          max
        })
        _xAxisList.push(index)
      })
      return merge({}, eBarOptions, {
        xAxis: {
          data: _xAxisList
        },
        series: [
          {
            type: 'bar',
            data: _serList
          }
        ]
      })
    },
    hasShow() {
      return this.selecteType === 'ryqtj' && this.bottomBarList.length > 0
    },
    hasShowZQFX() {
      return this.selecteType === 'zqfx' && this.zqfxList.length > 0
    }
  },
  methods: {
    ...mapActions(['loadRYQGLData', 'loadZZQQSData', 'changeZZQQSSelecetedPoint']),
    handleBrushSelected(params = {}) {
      const { batch = [] } = params
      const _selected = batch[0] && batch[0].selected
      const _list = _selected && _selected[0].dataIndex
      if (_list && _list.length > 0) {
        const _f = head(_list)
        const _e = last(_list)
        const _fData = this.bottomBarList[_f]
        const _eData = this.bottomBarList[_e]
        const _mix = _fData.min
        const _max = _eData.max
        this.loadRYQGLData({
          min: _mix,
          max: _max
        })
      }
    },
    handleELineClick(params) {
      const { name } = params
      if (name) {
        const _index = indexOf(this.ZZQQSSelectedPoint, name)
        if (!~_index) {
          this.changeZZQQSSelecetedPoint(name)
          this.loadZZQQSData({
            period: name
          })
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.center-bottom-wrap {
  width: 100%;
  height: 100%;
}
</style>
